<template>
  <view class="news-list">
    <!-- 置顶新闻 -->
    <view class="cardstyle">
      <text class="titlebox">党的二十届四中全会</text>
      <view class="tipsbox">
        <text class="top-tag">置顶</text>
        <text class="source">人民日报</text>
        <text class="comment-count">3126评</text>
        <text class="date">2025.10.25</text>
      </view>
    </view>

    <!-- 非置顶新闻1 -->
    <view class="cardstyle">
      <text class="titlebox">14个月从100家开到1000家门店，蜜雪冰城为何买下这家精酿啤酒商</text>
      <view class="tipsbox">
        <text class="source">界面新闻</text>
        <text class="comment-count">56评</text>
        <text class="date">2025.10.07</text>
      </view>
    </view>

    <!-- 非置顶新闻2 -->
    <view class="cardstyle">
      <text class="titlebox">"没有短板"的完美战鹰！歼-16机库独家探访</text>
      <view class="tipsbox">
        <text class="source">红星新闻</text>
        <text class="comment-count">56评</text>
        <text class="date">2025.10.07</text>
      </view>
    </view>

    <!-- 带底部搜索框的新闻 -->
    <view class="cardstyle">
      <text class="titlebox">黄金还能走多远？卖方高呼"第三浪启动"，230多份研报看多</text>
      <view class="tipsbox">
        <text class="source">财联社</text>
        <text class="comment-count">452评</text>
        <text class="date">2025.10.08</text>
      </view>
      <view class="search-box">
        <text class="search-label">搜索：</text>
        <text class="search-keyword">今日金价</text>
        <text class="search-divider">|</text>
        <text class="search-recommend">精选好物</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "cardViewText",
    data() {
      return {};
    }
  }
</script>

<style scoped>
  .news-list {
    display: flex;
    flex-direction: column;
    gap: 15rpx;
    padding: 15rpx;
  }
  
  .cardstyle {
    background-color: aliceblue;
    border-radius: 20rpx;
    padding: 20rpx;
    box-sizing: border-box;
  }
  
  .titlebox {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
  }
  
  .tipsbox {
    display: flex;
    align-items: center;
    margin-top: 15rpx;
    font-size: 24rpx;
    color: #666;
  }
  
  .top-tag {
    color: #f00;
    margin-right: 20rpx;
    padding: 2rpx 10rpx;
    background-color: #fff0f0;
    border-radius: 6rpx;
  }
  
  .source {
    margin-right: 20rpx;
  }
  
  .comment-count {
    margin-right: 20rpx;
  }
  
  .date {
    flex: 1;
    text-align: right;
    color: #999;
  }
  
  .search-box {
    display: flex;
    align-items: center;
    margin-top: 15rpx;
    font-size: 26rpx;
    color: #666;
    padding-top: 15rpx;
    border-top: 1px solid #f0f0f0;
  }
  
  .search-label {
    color: #999;
  }
  
  .search-keyword {
    color: #007aff;
    margin: 0 10rpx;
  }
  
  .search-divider {
    color: #ddd;
    margin: 0 5rpx;
  }
  
  .search-recommend {
    color: #007aff;
  }
</style>